<template>
    <div class="skin-analyzer">
      <el-card class="upload-card">
        <div class="upload-area">
          <el-upload
            ref="uploadRef"
            class="image-upload"
            :show-file-list="true"
            :limit="1"
            :before-upload="beforeUpload"
            :auto-upload="false"
            :on-change="handleFileChange"
            accept=".jpg,.jpeg"
          >
            <template #trigger>
              <el-button type="primary">选择图片</el-button>
            </template>
          </el-upload>
  
          <div class="upload-tip">
            <p>只支持 JPG/JPEG 格式图片</p>
          </div>
  
          <!-- 图片预览 -->
          <div v-if="imageUrl" class="preview-area">
            <h3>图片预览：</h3>
            <img :src="imageUrl" class="preview-image" />
          </div>
  
          <!-- 分析按钮 -->
          <el-button 
            type="success" 
            :disabled="!selectedFile"
            :loading="analyzing"
            @click="analyzeImage"
            class="analyze-btn"
          >
            {{ analyzing ? '分析中...' : '开始分析' }}
          </el-button>
        </div>
      </el-card>
  
      <!-- 分析结果展示 -->
      <el-card v-if="analysisResult" class="result-card">
        <template #header>
          <div class="result-header">
            <h3>分析结果</h3>
          </div>
        </template>
        <pre class="result-content">{{ analysisResult }}</pre>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  
  const uploadRef = ref(null)
  const imageUrl = ref('')
  const selectedFile = ref(null)
  const analyzing = ref(false)
  const analysisResult = ref('')
  
  // 上传前验证
  const beforeUpload = (file) => {
    const isJPG = file.type === 'image/jpeg'
    if (!isJPG) {
      ElMessage.error('只能上传 JPG/JPEG 格式的图片！')
      return false
    }
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
      ElMessage.error('图片大小不能超过 2MB！')
      return false
    }
    return true
  }
  
  // 文件改变时的处理
  const handleFileChange = (file) => {
    if (file) {
      selectedFile.value = file.raw
      imageUrl.value = URL.createObjectURL(file.raw)
      analysisResult.value = '' // 清空之前的分析结果
    }
  }
  
  // 分析图片
  const analyzeImage = async () => {
    if (!selectedFile.value) {
      ElMessage.warning('请先选择图片')
      return
    }
  
    analyzing.value = true
    const formData = new FormData()
    formData.append('file', selectedFile.value)
  
    try {
      const response = await axios.post('http://localhost:8080/api/analyze', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      
      analysisResult.value = response.data
      ElMessage.success('分析完成')
    } catch (error) {
      ElMessage.error(error.response?.data || '分析失败，请重试')
      console.error('Analysis error:', error)
    } finally {
      analyzing.value = false
    }
  }
  </script>
  
  <style scoped>
  .skin-analyzer {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .upload-card {
    margin-bottom: 20px;
  }
  
  .upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .upload-tip {
    color: #909399;
    font-size: 14px;
    margin: 10px 0;
  }
  
  .preview-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
  }
  
  .preview-image {
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
  }
  
  .analyze-btn {
    width: 200px;
    margin-top: 20px;
  }
  
  .result-card {
    margin-top: 20px;
  }
  
  .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .result-content {
    white-space: pre-wrap;
    font-family: monospace;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin: 0;
  }
  </style>